// 1.利用循环对每一个按钮添加事件
import './index.css';
let li = document.querySelectorAll('li');
for (let i = 0; i < li.length; i++) {
    li[i].addEventListener('click', function () {
        //先移除有active的类
        let active = document.querySelector('.active');
        active.classList.remove('active');
        // 移除完再对点击的tab添加active类
        li[i].classList.add('active');
        let tabContent = document.querySelector('.tab-content');
        // 对tab-content
        tabContent.innerHTML = `内容${i + 1}`;
    });
}
//
//
// 2.利用事件委托对小li进行添加监听器
let ul = document.querySelector('ul');
let tabContent = document.querySelector('.tab-content');
// 对li的父盒子进行时间绑定，实现事件委托
ul.addEventListener('click', function (e) {
    // 查找当前有没有active已被激活的标签
    let active = document.querySelector('.active');
    // 如果点击ul里面的内容标签为li，则进行移除原有的active类，给对应的标签添加active类
    if (e.target.tagName === 'LI') {
        // 移除active和添加active
        active.classList.remove('active');
        e.target.classList.add('active');
        tabContent.innerHTML = '内容' + e.target.innerHTML.slice(2);
    }
});
